웹 성능 최적화
왜 성능 최적화를 할 줄 알아야 하는가?#
- 사용자가 떠나지 않도록 하기 위해 = 수익 증대를 위해
- 프론트엔드 개발자로서, 경쟁력을 갖추기 위해
성능 최적화를 위해 배워야할 것들#
- 브라우저의 렌더링 원리
- Performance 패널을 이용한 분석
- Lighthouse 패널을 이용한 분석
- Network 패널을 이용한 분석
- webpack-bundle-analyzer를 이용한 분석
- 텍스트 압축
- 이미지 사이즈 최적화
- 적절한 사이즈로 변환
- 이미지 CDN을 통한 최적화
- CDN: 물리적 거리의 한계를 극복하기 위해 소비자(사용자)와 가까운 곳에 컨텐츠 서버를 두는 기술
- 이미지 CDN: 기본적인 CDN의 개념과, 이미지를 사용자에게 보내주기 전에 가공(사이즈 변경,
이미지 포맷 변경)하는 역할을 함
- 이미지 CDN을 제공해주는 서비스: https://imgix.com/
- 리소스 캐싱
- 이미지 preload
- 컴포넌트 preload
- Component Lazy Load
- React Code Splitting
- Image Lazy Load
- 병목 코드 제거
- repaint, reflow 줄이기
웹 성능 결정 요소#
로딩 성능#
각 리소스를 불러오는 성능
렌더링 성능#
불러온 리소스들을 화면에 보여주는 성능